<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贵重金属实时报价</title>
    <style>
        /* 设置整体背景颜色和字体颜色 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #3E2723; /* 黑褐色背景 */
            color: white; /* 白色字体 */
        }

        /* 页面容器 */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 标题样式 */
        h3 {
            text-align: center;
            color: #FFEB3B; /* 设置标题为黄色 */
        }

        /* 时间和刷新按钮的布局 */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }

        /* 时间样式 */
        .time {
            font-size: 14px;
            color: #FFFFFF;
        }

        /* 刷新按钮样式 */
        .refresh-button {
            background-color: #FFEB3B;
            color: #3E2723;
            border: none;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            border-radius: 5px;
            margin-right: 20px;
        }

        .refresh-button:hover {
            background-color: #FFD54F;
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            background-color: #4E342E; /* 表格背景颜色 */
        }

        th, td {
            padding: 12px;
            text-align: center;
            border: 1px solid #7B4B3A; /* 边框颜色 */
        }

        th {
            background-color: #5D4037; /* 表头背景颜色 */
        }

        td .highest {
            color: red;
            font-size: 12px;
        }

        td .lowest {
            color: green;
            font-size: 12px;
        }

        /* 响应式布局，移动端优化 */
        @media (max-width: 768px) {
            table, th, td {
                font-size: 14px;
            }

            .container {
                padding: 10px;
            }
        }
    </style>
</head>
<body>

<div class="container">
    <h3>贵重金属实时报价</h3>

    <!-- 头部部分：时间和刷新按钮 -->
    <div class="header">
        <div class="time" id="currentTime">2025-05-22 10:00:00</div>
        <button class="refresh-button" onclick="refreshData()">刷新</button>
    </div>

    <!-- 金属报价表格 -->
    <table id="metalTable">
        <thead>
        <tr>
            <th>商品</th>
            <th>回购</th>
            <th>销售</th>
            <th>高低</th>
        </tr>
        </thead>
        <tbody>
        <!-- 数据行会通过JS动态插入 -->
        </tbody>
    </table>
    <div id="data"></div>
</div>

<script>
    // JSON数据
    const metalData = {
        "metalKey": "AU",
        "metalName": "黄金",
        "buy": 776.52,
        "send": 777.52,
        "buyPrimitive": 776.52,
        "sendPrimitive": 777.52,
        "highest": 780.85,
        "lowest": 773.07,
        "pxh": 100,
        "nowtime": "1747894829",
        "dataType": "1"
    };

    // 更新当前时间的函数
    function updateTime() {
        const currentTimeElement = document.getElementById('currentTime');
        const now = new Date();
        const formattedTime = now.getFullYear() + '-' +
            (now.getMonth() + 1).toString().padStart(2, '0') + '-' +
            now.getDate().toString().padStart(2, '0') + ' ' +
            now.getHours().toString().padStart(2, '0') + ':' +
            now.getMinutes().toString().padStart(2, '0') + ':' +
            now.getSeconds().toString().padStart(2, '0');
        currentTimeElement.textContent = formattedTime;
    }

    // 刷新数据的函数
    function refreshData() {
        // 可以在此处添加刷新数据的逻辑，例如重新获取数据
        alert('刷新数据');
        // 此处可执行相关的刷新操作
    }

    // 动态填充金属报价数据
    function fillMetalData(data) {
        const tableBody = document.querySelector('#metalTable tbody');
        tableBody.innerHTML = "";
        var jsonArray = eval(data);
        for (let key in jsonArray) {
            var item = jsonArray[key];

            console.log(item)
            const row = document.createElement('tr');
            row.innerHTML = `
            <td>${item.metalName}</td>
            <td>${item.buy.toFixed(2)}</td>
            <td>${item.send.toFixed(2)}</td>
            <td>
                <div class="highest">${item.highest.toFixed(2)}</div>
                <div class="lowest">${item.lowest.toFixed(2)}</div>
            </td>
        `;
            tableBody.appendChild(row);
        }


    }


    // 初始化页面内容
    function init() {
        updateTime();
        fillMetalData();
        setInterval(updateTime, 1000);  // 每秒钟更新时间
    }

    // 初始化调用
    init();

    var socket = new WebSocket("ws://localhost:8080/websocket");

    // 监听消息事件
    socket.onmessage = function (event) {
        //var data = JSON.parse(event.data);  // 解析接收到的 JSON 数据
        //console.log(JSON.parse(data));
        fillMetalData(event.data);
    };

    // 监听打开事件
    socket.onopen = function () {
        console.log("WebSocket connection established.");
    };

    // 监听关闭事件
    socket.onclose = function () {
        console.log("WebSocket connection closed.");
    };

    // 监听错误事件
    socket.onerror = function (error) {
        console.error("WebSocket error: " + error);
    };



</script>

</body>
</html>
